<template>
  <div class="container">
    <el-row type="flex" justify="center">
      <el-col :xs="18" :sm="18" :md="18" :lg="18" :xl="18">
        <img src="../../public/Collection.png" alt="" class="tab-banner">
        <ArticleList :article-list="articleList"></ArticleList>
        <div class="nothing" v-show="!articleList.length">
          <img src="../../public/nothing.png" alt="">
          <div>这里还木有内容哦~快去收藏吧</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ArticleList from '../components/ArticleList'

export default {
  name: 'BookMarks',
  data () {
    return {
      articleList: [{
        id: 3,
        img_url: '/content/content3.png',
        title: '世界第三大移动操作系统是什么？',
        content: '如果让你说出世界上最大的三种移动操作系统，你肯定能说出Android和 iOS。但是第三大移动操作系统是什么呢？它肯定不是黑莓操作系统，它已经退...',
        nickname: '庆历四年冬',
        score: 2.7,
        comment: 0,
        like: 20
      }]
    }
  },
  components: { // 模板加载
    ArticleList
  },
  computed: {// 计算属性

  },
  mounted () { // 挂载
  },
  methods: {// 方法

  }
}
</script>

<style lang="scss">
.container {
  padding-top: 30px;
  .nothing{
    text-align: center;
    margin-top: 100px;
    img{
      width: 100px;
    }
    div{
      margin-top: 20px;
      font-size: 14px;
      font-weight: 700;
    }
  }
  .tab-banner{
    margin-bottom: 30px;
    width: 100%;
    min-height: 100px;
    background-color: hsla(0,0%,71%,.2);
    border-radius: 6px;
  }
}
</style>
